<div [formGroup]="configuration.formGroupReference">
    <label [ngClass]="configuration.iconLabel ? 'd-flex' : 'row'">
        <span *ngIf="configuration.iconLabel" class="input-group-text h-100 d-block">
            <em class="fa" [ngClass]="configuration.iconLabel"></em
        ></span>
        <span *ngIf="!configuration.iconLabel" class="col-4 col-form-label">
            {{ labelTranslationKey | translate }} {{ configuration.required ? "*" : "" }}
        </span>
        <span class="col" [ngClass]="{ 'd-flex': showPercent, 'p-0': configuration.iconLabel }">
            <input
                type="number"
                [ngClass]="configuration.showArrow ? '' : 'input-number-no-arrows'"
                [formControlName]="configuration.formControlId"
                class="form-control qa-{{ configuration.qaPrefix }}-{{ configuration.formControlId }}"
                placeholder="{{ labelTranslationKey | translate }}"
                min="{{ min }}"
                max="{{ max }}"
                step="{{ configuration.step }}"
                (input)="inputUpdate()"
                (change)="changeUpate()"
                [required]="configuration.required"
            />
            <span *ngIf="showPercent" class="my-auto pl-2">%</span>
        </span>
        <app-form-input-error
            class="invalid-feedback"
            [formGroupReference]="configuration.formGroupReference"
            [formControlId]="configuration.formControlId"
        >
        </app-form-input-error>
    </label>
</div>
